<template>
   <div class="button-wrap">
      <button class="button" :style="color[props.type]" :disabled="disabled" :class="disabled?'not-pointer':'pointer'">
        <slot></slot>
    </button>
   </div>
</template>

<script lang="ts" setup>
import { IButtonType } from "@types"
const props = defineProps({
  type: {
    type: String,
    default: "default"
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const color:IButtonType = {
  primary: {
    background: "#1890ff",
    color: "#fafafa"
  },
  danger: {
    background: "#f5222d",
    color: "#fafafa"
  },
  default: {
    color: "#1f1f1f",
    background: "#f0f5ff",
    border: "1px solid rgba(0, 0, 0, 0.1)"
  }
}
</script>

<style scoped lang="less">
.button-wrap{
  display: inline-block;
  .button {
      padding: 8px 16px;
      box-shadow: @smallShadow;
      border-radius: @smallRadius;
      text-align: center;
      white-space: nowrap;
   }
}

</style>
